
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册登录页</title>
    <script src="./static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="./static/jquery-easyui-1.3.3/js/fy-alert.js"></script>
    <link rel="stylesheet" href="./static/css/style.css">
    <link rel="stylesheet" type="text/css" href="./static/css/fy-alert.css">
    <link rel="stylesheet" type="text/css" href="./static/css/demo.css">
</head>
<body>

<form action="/loginServlet" method="post">
    <input type="hidden" name="way" value="register">
    <div class="content">
        <div class="top">
            <h3>注册</h3>
        </div>
        <div class="center">
            <div class="line">
                <label>账号</label>
                <input type="text" name="username" id="username" value="" required="required"/>
                <span>请输入您的账号</span>
            </div>
            <div class="line">
                <label>密码</label>
                <input type="password" name="password" id="password" value=""  required="required"/>
                <span>请输入您的密码</span>
            </div>
            <div class="line not">
                <label>确认密码</label>
                <input type="password" name="okPassword" id="okPassword" value=""  required="required"/>
                <span>请确认您的密码</span>
            </div>
        </div>
        <div class="bottom">
            <input id="submit" type="submit">
        </div>

    </div>



</form>

</body>
<script type="text/javascript">
    $("#username").blur(function () {
        var username = $('#username').val()
        check(username)
    })
    //验证密码
    $("#password").blur(function () {
        var password = $('#password').val()
        if (password.length<6) {
            aniExtend({
                title:"提示",
                content:"密码不能小于6位"
            })
        }
    })
    //验证确认密码
    $("#okPassword").blur(function () {
        var password = $('#password').val()
        var okPassword = $('#okPassword').val()
        if (okPassword == null || okPassword == "") {
            aniExtend({
                title:"提示",
                content:"确认不能为空"
            })
        }else{
           password ==okPassword?  "" : aniExtend({title:"提示", content:"两次输入的密码不一致"});

        }
    })

    //检验格式
    function check(name) {
        var reg_name = /^[a-zA-Z]([-_a-zA-Z0-9]{4,30})$/igs;
        var t3 = name.match(reg_name);

        if (name == "") {
            aniExtend({
                title: "提示",
                content: "必须以字母开头，英文、数字、下划线和减号 6-30位！"
            });
            return 0;
        } else if (name[0].charCodeAt() <= 57 && name[0].charCodeAt() >= 48) {
            aniExtend({
                title: "提示",
                content: "必须以字母开头，英文、数字、下划线和减号 6-30位！"
            });
            return 0;
        } else if (name.length < 5 || name.length > 30) {
            aniExtend({
                title: "提示",
                content: "用户名必须必须在5-30位！"
            });
            return 0;
        } else if (t3 == null) {
            console.log(t3)
            aniExtend({
                title: "提示",
                content: "用户名必须以字母开头，英文、数字、下划线和减号 5-30位！请设置符合的用户名！"
            });

            return 0;
        }

        return 1;

    }
    //自定义弹出层动画
    function aniExtend(a){
        fyAlert.alert({
            title   : a.title,
            aniExtend:'lightSpeedIn',
            content : a.content,
            btns    : {                  //按钮组
                '确定' : function(obj){
                    obj.destory();   //在页面上

                },
                '取消' : function(obj){
                    obj.destory(); //销毁

                }
            },
        })
    }
</script>
</html>
